<template>
	<view>
		<u-navbar height="50" back-icon-color="#333" title="订单详情" title-color="#333" title-size="36"></u-navbar>
		<view class="content">
			<view class="content-status" v-if="orderInfo.status == -1">已取消</view>
			<view class="content-status" v-if="orderInfo.status == 0">待付款</view>
			<view class="content-status" v-if="orderInfo.status == 1">待发货</view>
			<view class="content-status" v-if="orderInfo.status == 2">待收货</view>
			<view class="content-status" v-if="orderInfo.status == 3">已完成</view>
			<view class="content-status" v-if="orderInfo.status == 4">退款中</view>
			<view class="content-status" v-if="orderInfo.status == 5">退款完成</view>
			<view class="content-status" v-if="orderInfo.status == -2">拒绝退款</view>
			<view class="content-reason" v-if="orderInfo.status == -2">
				退款申请失败：{{orderInfo.reason_refusal_refund}}</view>
			<view class="content-user" v-if="orderInfo.delivery">
				<text>收货人：</text>
				<text>{{orderInfo.delivery.contact_person}}</text>
				<text style="margin-left: 20rpx;">{{orderInfo.delivery.contact_phone}}</text>
			</view>
			<view class="content-address" style="margin-top: 10rpx;" v-if="orderInfo.delivery">
				{{orderInfo.delivery.address}}
			</view>
			<view class="content-goods">
				<view class="content-goods-title">商品信息</view>
				<view class="content-goods-item" v-for="(item,index) in orderInfo.goods" :key="index">
					<u-image width="160rpx" height="160rpx" border-radius="10" :src="item.goods_sku_cover_format">
					</u-image>
					<view class="cgi-info">
						<view class="cgi-info-name">{{item.goods_name}}</view>
						<view class="cgi-info-number">
							<text>{{showGoodsSku(item.goods_skus)}}</text>
							<text>x{{item.goods_number}}</text>
						</view>
						<view class="cgi-info-price">¥{{item.goods_sku_price}}</view>
					</view>
				</view>
				<view class="content-yf">
					<text>配送费</text>
					<text v-if="orderInfo.freight_price && Number(orderInfo.freight_price) > 0">包邮</text>
					<text v-else>包邮</text>
				</view>
				<view class="content-count">
					<view v-if="orderInfo.goods">共{{orderInfo.goods.length}}件商品</view>
					<view style="margin-left: 10rpx;">合计：<text>￥{{orderInfo.pay_amount}}</text></view>
				</view>
			</view>
		</view>
		<view class="order">
			<view class="order-info">订单信息</view>
			<view class="order-info">订单编号：{{orderInfo.order_no}}</view>
			<view class="order-info">创建时间：{{orderInfo.created_at}}</view>
			<view class="order-info" v-if="orderInfo.pay_time">支付时间：{{orderInfo.pay_time}}</view>
			<view class="order-info" v-if="orderInfo.complete_time">完成时间：{{orderInfo.complete_time}}</view>
			<view v-if="orderInfo.delivery">
				<view class="order-info" v-if="orderInfo.delivery.support_express_name">
					物流公司：{{orderInfo.delivery.support_express_name}}</view>
				<view class="order-info" v-if="orderInfo.delivery.support_express_number">
					<view style="flex: 1;">快递单号：{{orderInfo.delivery.support_express_number}}</view>
					<view @click="onCopy(orderInfo.delivery.support_express_number)">复制</view>
				</view>
			</view>
			<view class="order-info">订单备注：{{orderInfo.remark}}</view>
		</view>
		<view class="H100"></view>
		<view class="btn">
			<text class="btn-button1" v-if="orderInfo.status == 0" @click="onOrderCancel(orderInfo)">取消订单</text>
			<text class="btn-button2" v-if="orderInfo.status == 0" @click="onOrderPayment(orderInfo)">立即支付</text>
			<text class="btn-button1" v-if="orderInfo.status == 1 || orderInfo.status == 2"
				@click.stop="onOrderExpress(orderInfo)">查看物流</text>
			<text class="btn-button2" v-if="orderInfo.status == 1 || orderInfo.status == 2"
				@click.stop="onOrderReturn(orderInfo)">申请退款</text>
			<text class="btn-button2" v-if="orderInfo.status == 2" @click="onOrderConfrim(orderInfo)">确认收货</text>
		</view>
		<u-modal v-model="messageModal" :show-cancel-button="true" :content="messageText" @confirm="onModalConfirm">
		</u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderInfo: '',
				orderid: '',
				order_no: '',
				totalPrice: 0,
				messageType: 1,
				messageModal: false,
				messageText: '确定要取消该订单吗？'
			}
		},
		onLoad(res) {
			this.orderid = (res.id);
			this.initData();
		},
		methods: {
			initData() {
				let self = this;
				self.$user.orderDetails(this.orderid, true).then(res => {
					self.orderInfo = res.data;
				})
			},
			showGoodsSku(goods_skus){
				if(goods_skus){
					let skuList = []
					let goodsSku = JSON.parse(goods_skus);
					goodsSku.forEach(item=>{
						skuList.push(item.name);
					});
					return skuList.join(',');
				}
				return '';
			},
			onOrderDelete(item) {
				this.order_id = item.id;
				this.messageModal = true
				this.messageType = 2;
				this.messageText = '确定要删除该订单吗?';
			},
			onOrderCancel(item) {
				this.order_id = item.id;
				this.messageModal = true
				this.messageType = 0;
				this.messageText = '确定要取消订单吗?';
			},
			onOrderPayment(item) {
				this.totalPrice = item.pay_amount;
				this.order_no = item.order_no;
				this.$refs.payment.open();
			},
			onOrderExpress(item) {
				this.$utils.jump('/other/logistics/logistics?id=' + item.id);
			},
			onOrderReturn(item) {
				this.$utils.jump('/other/order-return/order-return?id=' + item.id);
			},
			onCopy(number) {
				let self = this;
				uni.setClipboardData({
					data: number,
					success: function() {
						self.$utils.tips('复制成功');
					}
				});
			},
			onOrderConfrim(item) {
				this.order_id = item.id;
				this.messageModal = true
				this.messageType = 1;
				this.messageText = '该订单确认收货吗?';
			},
			onModalConfirm() {
				let self = this;
				if (this.messageType == 0) {
					self.$user.orderCancel({
						order_id: this.order_id
					}, true, true).then(res => {
						self.$utils.tips('取消成功');
						setTimeout(function() {
							self.initData();
						}, 500)
					});
				} else if (this.messageType == 1) {
					self.$user.orderConfrim({
						order_id: this.order_id
					}, true, true).then(res => {
						self.$utils.tips('确认收货成功');
						setTimeout(function() {
							self.initData();
						}, 500)
					});
				} else {
					self.$user.orderDelete({
						order_id: this.order_id
					}, true, true).then(res => {
						self.$utils.tips('删除成功');
						setTimeout(function() {
							self.initData();
						}, 500)
					});
				}
			},
		}
	}
</script>

<style>
	@import url('order-details.css');

	page {
		background: #F2F2F2;
	}
</style>
